<template>
    <div class="commoncon personalHome future">
        <Personal-Header index="1" :theme="theme" bgColor="#5741d9" @changelang="changeLanguage"></Personal-Header>
        <div class="comcont" :class="theme?'night':'daytime'">
            <div class="klineIntro">
                <div class="klineData">
                    <div class="dataBar"><h3>BTC/USDT {{$t('l.trade_64')}}</h3> </div>
                    <div class="dataBar">
                        <p class="dataName">{{$t('l.trade_65')}} </p>
                        <p class="dataPrice"><span>{{quote.prevClose}}</span>USDT</p>
                    </div>
                    <div class="dataBar">
                        <p class="dataName">{{$t('l.trade_66')}} </p>
                        <p class="dataPrice"><span>{{quote.price}}</span>USDT</p>
                    </div>
                </div>
                <div class="klinetime">
                    <span>{{time}}</span>
                </div>
                <div class="globalTheme">
                    <button class="setTheme"><i></i></button>
                    <ul class="theme-style">
                        <li @click="theme = false" :class="theme?'':'cur'" >
                            <i class="day"></i>
                            <p>白色</p>
                        </li>
                        <li @click="theme = true" :class="theme?'cur':''">
                            <i class="night"></i>
                            <p>深蓝色</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix">
                <div class="trandarea">
                    <div class="futurepabel">
                        <h2 class="panelhead">{{$t('l.trade_67')}} </h2>
                        <div class="panelbody">
                            <div class="pabelcon">
                                <p class="balance">
                                    {{$t('l.trade_68')}}
                                    <span class="fr">{{quote.quoteCurrencyName}}</span>
                                    <span class="fr">{{assembles.available}}</span>
                                </p>
                                <p class="balance">
                                    {{$t('l.trade_69')}}
                                    <span class="fr">{{quote.quoteCurrencyName}}</span>
                                    <span class="fr">{{assembles.rebate}}</span>
                                </p>
                                <label class="stop-label">
                                    <input v-model="count" @keyup="$message('敬请期待');return;changecount()" type="number">
                                    <span class="currency">USDT</span>
                                </label>
                                <div class="sliderbar">
                                    <el-slider
                                        v-model="percentage"
                                        :step="1"
                                        @change="$message('敬请期待');return;changepercentage()">
                                    </el-slider>
                                </div>
                                <p class="balance">
                                    {{$t('l.trade_70')}}
                                    <span class="fr">USDT</span>
                                    <span class="fr">{{rateNum}}</span>
                                </p>
                                <a class="tradeBtn green" @click="$message('敬请期待');return;FuturePlaceOrderRequest('R')">{{$t('l.trade_71')}} </a>
                                <a class="tradeBtn red" @click="$message('敬请期待');return;FuturePlaceOrderRequest('F')">{{$t('l.trade_72')}}</a>
                            </div>
                        </div>
                    </div>
                    <div class="futurepabel">
                        <h2 class="panelhead">{{$t('l.trade_73')}} </h2>
                        <div class="panelbody" style="min-height:450px;">
                            <div class="analysort clearfix">
                                <a :class="timePeriod==1?'active':''" @click="$message('敬请期待');return;settimePeriod(1);">{{$t('l.trade_74')}}</a>
                                <a :class="timePeriod==2?'active':''" @click="$message('敬请期待');return;settimePeriod(2);">{{$t('l.trade_75')}}</a>
                                <a :class="timePeriod==3?'active':''" @click="$message('敬请期待');return;settimePeriod(3);">{{$t('l.trade_76')}}</a>
                                <a :class="timePeriod==0?'active':''" @click="$message('敬请期待');return;settimePeriod(0);">{{$t('l.trade_77')}}</a>
                            </div>
                            <v-chart
                                style="width:100%;height:300px;position:relative;top:0px;left:-20px;"
                                :options="option"
                            />
                            <div class="legent">
                                <div class="legentitem">
                                    <span class="blue"></span>
                                    <span>{{$t('l.trade_78')}} {{option.series[0].data[0].value}}{{$t('l.trade_81')}}</span>
                                </div>
                                <div class="legentitem">
                                    <span class="green"></span>
                                    <span>{{$t('l.trade_79')}} {{option.series[0].data[1].value}}{{$t('l.trade_81')}}</span>
                                </div>
                                <div class="legentitem">
                                    <span class="yellow"></span>
                                    <span>{{$t('l.trade_80')}} {{option.series[0].data[2].value}}{{$t('l.trade_81')}}</span>
                                </div>
                                <p>{{$t('l.trade_82')}}：{{summary.income}} USDT</p>
                                <p>{{$t('l.trade_83')}}：{{summary.expenditure}} USDT</p>
                                <p>{{$t('l.trade_84')}}：{{summary.total}} USDT</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="trandinfo">
                    <div class="tradkline">
                        <Tradingview :newbar='newbar' :theme="theme" :initinterval="initinterval"></Tradingview>
                    </div>
                    <div class="panelRow clearfix">
                        <!--交割列表-->
                        <div class="futurepabel fl">
                            <h2 class="panelhead">
                                <a :class="isDelivery?'':'active'" @click="$message('敬请期待');return;getdelist(false)">{{$t('l.trade_85')}}</a>
                                <a :class="isDelivery?'active':''" @click="$message('敬请期待');return;getdelist(true)">{{$t('l.trade_86')}}</a>
                            </h2>
                            <div class="datatable">
                                <div class="tablehead">
                                    <span>{{$t('l.personal_146')}}</span>
                                    <span>{{$t('l.trade_87')}}</span>
                                    <span>{{$t('l.trade_88')}}</span>
                                    <span>{{$t('l.trade_96')}}</span>
                                </div>
                                <div class="tablebody">
                                    <div class="bodydata" v-for="(item,index) in deliverys" :key="index">
                                        <span>{{item.time}}</span>
                                        <span>{{item.orderAmount}}</span>
                                        <span>{{item.filledAmount}}</span>
                                        <span :class="item.css">{{item.status_text}}</span>
                                    </div>
                                </div>
                                <div class="pager clearfix">
                                    <p class="nextpage fl" @click="$message('敬请期待');return;deliveryListpre()" v-show="delPageNum>1">{{$t('l.trade_89')}}</p>
                                    <p class="nextpage fr" @click="$message('敬请期待');return;deliveryListnext()" v-show="delPageNum<delTotalpage">{{$t('l.trade_90')}}</p>
                                </div>
                            </div>
                        </div>
                        <!--委托列表-->
                        <div class="futurepabel fl">
                            <h2 class="panelhead">
                                <a :class="activeOnly?'active':''"  @click="$message('敬请期待');return;getentrylist(true);">{{$t('l.trade_91')}}</a>
                                <a :class="activeOnly?'':'active'"  @click="$message('敬请期待');return;getentrylist(false);">{{$t('l.trade_92')}}</a>
                            </h2>
                            <div class="datatable">
                                <div class="tablehead">
                                    <span>{{$t('l.personal_146')}}</span>
                                    <span style="padding-right:10px;">{{$t('l.trade_93')}}</span>
                                    <span>{{$t('l.trade_94')}}</span>
                                    <span>{{$t('l.trade_95')}}</span>
                                    <span>{{$t('l.trade_96')}}</span>
                                </div>
                                <div class="tablebody">
                                    <div class="bodydata" v-for="(item,index) in futureDmOrders" :key="index">
                                        <div>
                                            <p>{{item.a_Time}}</p>
                                            <p>{{item.b_Time}}</p>
                                        </div>
                                        <div style="padding-right:10px;">
                                            <p>{{item.roundClose}}</p>
                                            <p>{{item.roundPreClose}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.filledPrice}}</p>
                                            <p>{{item.price}}</p>
                                        </div>
                                        <div>
                                            <p>{{item.action_text}}</p>
                                            <p>{{item.result}}</p>
                                        </div>
                                        <div>
                                            <p :class="item._css">{{item.orderStatus_text}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="pager clearfix">
                                    <p class="nextpage fl" @click="$message('敬请期待');return;futureorderPre()" v-show="activePage>1">{{$t('l.trade_89')}}</p>
                                    <p class="nextpage fr" @click="$message('敬请期待');return;futureordernext()" v-show="activePage<activePageTotal">{{$t('l.trade_90')}}</p>
                                </div>
                            </div>
                        </div>
                        <!--资金流水-->
                        <div class="futurepabel fl">
                            <h2 class="panelhead">
                                <a class="active">{{$t('l.trade_97')}}</a>
                            </h2>
                            <div class="datatable">
                                <div class="tablehead">
                                    <span>{{$t('l.personal_146')}}</span>
                                    <span>{{$t('l.trade_104')}}</span>
                                    <span>{{$t('l.advert_about25')}}</span>
                                </div>
                                <div class="tablebody">
                                    <div class="bodydata" v-for="(item,index) in flowrecord" :key="index">
                                        <span>{{item.updatedDate}}</span>
                                        <span>{{item.amount}}</span>
                                        <span class="green">{{item.statusName}}</span>
                                    </div>
                                </div>
                                <div class="pager clearfix">
                                    <p class="nextpage fl" @click="$message('敬请期待');return;getflowpre()" v-show="flowpages>1">{{$t('l.trade_89')}}</p>
                                    <p class="nextpage fr" @click="$message('敬请期待');return;getflownext()" v-show="flowpages<flowtotalPage">{{$t('l.trade_90')}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>
<style lang="less" scoped>
.personalHome {
  padding-top: 100px;
  // padding-bottom: 697px!important;
}
.future{
    .klineIntro{
        background-color: #100E2E;
        padding: 10px 30px;
        margin-bottom: 4px;
        .klinetime{
            display: inline-block;
            vertical-align: middle;
            span{
                display: block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                border-radius: 50%;
                background:rgb(90, 171, 250);
                cursor: pointer;
                &.red{
                    font-size: 14px;
                }
            }
        }
        .klineData{
            overflow:hidden;
            width: auto;
            padding: 0;
            display: inline-block;
            vertical-align: middle;
            border-top: none;
            border-left: none;
            min-width: 1000px;
            .dataBar{
                float: left;
                width: auto;
                position: relative;
                margin-right: 30px;
                margin-left: 30px;
                &:first-child{
                   margin-left: 0;
                }
                h3{
                    font-size: 20px;
                    position: relative;
                    color: #cdd5df;
                    cursor: pointer;
                    margin: 10px 0;
                }
                .dataName,.dataPrice{
                    font-size: 10px;
                    color: #b6c0d5;
                    line-height: 20px;
                    padding-bottom: 0;
                    margin: 0;
                    margin-left: 0px;
                }
                .dataPrice{
                    span{
                        font-size: 18px;
                        padding-right: 5px;
                    }
                }
            }
        }
    }
    .comcont{
        background:#252a44;
        position:relative;
        min-width:1400px;
        min-height: 100%;
        box-sizing: border-box;
        .panelbody{
            position: relative;
        }
        .legent{
            padding-left: 36px;
            position: absolute;
            right: 50px;
            top: 104px;
            p{
                font-size:12px;
                color:#8481BB;
                line-height:17px;
                padding-bottom:8px;
            }
            .legentitem{
                margin-bottom:6px;
                line-height:17px;
                color:#8481BB;
                font-size:12px;
                .blue{
                    display:inline-block;
                    vertical-align: middle;
                    width:20px;
                    height:10px;
                    background:rgba(22,124,225,1);
                    border-radius:2px;
                }
                .green{
                    display:inline-block;
                    vertical-align: middle;
                    width:20px;
                    height:10px;
                    background:#2AA755;
                    border-radius:2px;
                }
                .yellow{
                    display:inline-block;
                    vertical-align: middle;
                    width:20px;
                    height:10px;
                    background:#D7AF19;
                    border-radius:2px;
                }
            }
        }
        .trandarea{
            float:right;
            width:375px;
            padding:0 2px;
            box-sizing: border-box;
        }
        .trandinfo{
            overflow:hidden;
            .tradkline{
                width:100%;
                height:464px;
                margin-bottom:10px;
                margin-right: 10px;
            }
            .panelRow{
                .futurepabel{
                    width:33.3%;
                    box-sizing: border-box;
                    padding: 0px 3px;
                    background:none;
                    .panelhead{
                        padding-top:0;
                        padding-bottom:0;
                    }
                }
            }
        }
        .futurepabel{
            background:#141236;
            padding-bottom:43px;
            margin-bottom:10px;
            .panelhead{
                padding: 10px 16px;
                border-top: 1px solid #201D45;
                border-bottom: 1px solid #201D45;
                font-size: 14px;
                // font-familyA: "Roboto-Medium";
                font-weight: 500;
                line-height: 23px;
                color: #8481BB;
                overflow:hidden;
                background: #100E2E;
                a{
                    float: left;
                    padding: 0 21px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #8481BB;
                    line-height: 42px;
                    cursor: pointer;
                    &.active{
                        background: rgba(132, 129, 187, 0.1);
                        color: #2D8DFE;
                        border-top: 1px solid #2D8DFE;
                    }
                }
            }
            .datatable{
                padding:0 16px;
                background: #141236;
                min-height: 470px;
                .pager{
                    .nextpage{
                        line-height:32px;
                        font-size:12px;
                        color:#2D8DFE;
                        cursor: pointer;
                    }
                }

                .tablehead{
                    display: flex;
                    padding-bottom: 10px;
                    span{
                        flex: 1;
                        font-size: 12px;
                        font-weight: 400;
                        color: #8481BB;
                        line-height: 31px;
                        white-space: nowrap;
                        &:nth-child(2){
                            flex:1.3;
                        }
                    }
                }
                .tablebody{
                    height:368px;
                    .bodydata{
                        display: flex;
                        >*{
                            flex: 1;
                            font-size: 12px;
                            font-weight: 400;
                            color: #8481BB;
                            line-height: 16px;
                            height: 46px;
                        }
                        .green{color:#0DA88B;}
                        .red{color:#EF5756;}
                    }
                }

            }
            .pabelcon{
                padding:0 25px;
                .stop-label{
                    flex: auto;
                    width: 100%;
                    display: inline-block;
                    height: 30px;
                    margin: 10px 0;
                    line-height: 30px;
                    border-radius: 4px;
                    border: 1px solid rgba(132, 129, 187, 0.2);
                    position: relative;
                    input{
                        width: 100%;
                        font-size: 12px;
                        // font-familyA: "Roboto-Regular";
                        font-weight: 400;
                        color: #8481BB;
                        line-height: 30px;
                        text-indent: 12px;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                    }
                    span{
                        position: absolute;
                        right: 0;
                        top: 0;
                        font-size: 12px;
                        // font-familyA: "Roboto-Regular";
                        font-weight: 400;
                        color: rgba(132, 129, 187, 0.6);
                        line-height: 30px;
                        padding-right: 13px;
                        z-index: 9;
                        width: auto;
                        text-transform: uppercase;
                    }
                }
                .balance{
                    padding:10px 0;
                    overflow:hidden;
                    line-height: 22px;
                    font-size:14px;
                    color:#8481BB;
                    span{
                        text-align:right;
                        padding-left:10px;
                    }
                }
            }
            .sliderbar{
                padding:10px 0;
            }
            .tradeBtn{
                width: 100%;
                height: 30px;
                font-size: 14px;
                color: #fff;
                line-height: 30px;
                text-align: center;
                border-radius: 0px;
                display:block;
                margin-top:10px;
                margin-bottom:20px;
                cursor: pointer;
                &.green{
                    background:#0DA88B;
                    margin-top: 40px;
                }
                &.red{
                    background:#EF5756;
                }
            }
            .analysort{
                padding:15px 0;
                a{
                    float:left;
                    width: 60px;
                    height: 16px;
                    border: .5px solid rgba(132, 129, 187, 0.2);
                    margin-left: 10px;
                    line-height: 16px;
                    text-align: center;
                    font-size: 10px;
                    border-radius: 25px;
                    color: #8481BB;
                    cursor: pointer;
                    &.active{
                        background:#2D8DFE;
                        color:#fff;
                    }
                }
            }
        }
    }
}

.night{
    .theme2(#252a44,#131625,#111217,#d2d6ec,#171b2b,#b0b8db);
}
.daytime{
    .theme2(#e5ebf5, #f2f6fa,#e6ecf2,#1c242c,#fff,#596a7a);//页面背景，标题背景，边框颜色，标题颜色,面板背景，字体颜色
}
.theme2(@mbg_color,@bg_color,@bc_color,@cl_color,@bbg_color,@font_color){
    &.comcont {
        background: @mbg_color;
        .klineIntro{
            background: @bg_color;
            position: relative;
            .klineData{
                .dataBar{
                    h3{
                        color: @cl_color;
                    }
                    .dataName{
                        color: @cl_color;
                    }
                    .dataPrice{
                        color: @font_color;
                    }

                }
            }
        }
        .trandarea{
            .futurepabel{
                background: @bbg_color;
                .panelhead{
                    border-color: @bc_color;
                    background: @bg_color;
                    color: @cl_color;
                }
                .panelbody{
                    .pabelcon{
                        .balance{
                            color: @font_color;
                        }
                        .stop-label{
                            input{
                                color: @font_color;
                            }
                        }
                    }
                    .analysort{
                        a{
                            color: @font_color;
                            &.active{
                                background: #2D8DFE;
                                color: #fff;
                            }
                        }
                    }
                    .legent{
                        .legentitem{
                            color: @font_color;
                        }
                        p{
                          color: @font_color;
                        }
                    }
                }
            }
        }
        .trandinfo{
            .tradkline{
                box-sizing: border-box;
                padding-right: 6px;
            }
            .panelRow{
                .futurepabel {
                    .panelhead{
                        background: @bg_color;
                        color: @cl_color;
                        border-color: @bc_color;
                        a{
                            color: @cl_color;
                            &.active{
                                color: #2D8DFE;
                                border-bottom: 2px solid #2D8DFE;
                                background: none;
                                border-top: none;
                            }
                        }
                    }
                    .datatable{
                        background: @bbg_color;
                        .tablehead{
                            span{
                                color: @font_color;
                            }
                        }
                    }
                }
            }
        }
    }
}

</style>
<style  scoped>
.globalTheme {
    float: right;
    padding:5px 6px;
}

 .globalTheme .theme-style {
    width: 130px;
    height: 220px;
    padding: 3px;
    background-color: #fff;
    -webkit-box-shadow: 0 4px 16px rgba(69,97,137,.2);
    box-shadow: 0 4px 16px rgba(69,97,137,.2);
    position: absolute;
    right: 10px;
    top: 44px;
    z-index: 99;
    display: none;
}

 .globalTheme .theme-style li {
    text-align: center;
    padding: 7px 0;
    cursor: pointer
}

 .globalTheme .theme-style li i {
    display: block;
    height: 73px
}

 .globalTheme .theme-style li i.day {
    background: url(../assets/images/c6379d7.svg) no-repeat 50%
}

 .globalTheme .theme-style li i.night {
    background: url(../assets/images/f2d4f40.svg) no-repeat 50%
}

 .globalTheme .theme-style li i.dark {
    background: url(../assets/images/3873db7.svg) no-repeat 50%
}

 .globalTheme .theme-style li p {
    color: #596a7a;
    margin-top: 6px;
    height: 17px;
    line-height: 17px
}

 .globalTheme .theme-style li:hover {
    background-color: rgba(229,235,245,.7)
}

 .globalTheme .theme-style li.cur {
    background-color: #e5ebf5
}

 .globalTheme button.setTheme {
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    top: 6px;
    right: 10px;
    background-image: url(../assets/images/742f8ee.svg);
    background-repeat: no-repeat;
    background-position: 50%;

    background-color: transparent;
}

 .globalTheme:hover button.setTheme {
    background-color: rgba(53,124,225,.1);
    background-image: url(../assets/images/11f2696.svg)
}
.globalTheme:hover .theme-style {
    display: block;
    z-index: 99;
}
</style>
<script>
import commonMixins from "@/mixins";
import PersonalHeader from "../components/personalHeader";
import Footer from "../components/footer";
import Tradingview from "../components/tradingview";
import trade from "../assets/js/trade"
import moment from 'moment'
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/pie";
import {api} from '../api/api';
import { setInterval } from 'timers';
import event from "../assets/js/event";
var num = 0;
export default {
    mixins: [commonMixins],
    components: {
        PersonalHeader,
        Footer,
        Tradingview,
        "v-chart": ECharts
    },
    data(){
        return{
            initinterval:1,
            percentage:0,
            newbar:{},//最新一条数据
            kLinebars:[],//K线数据
            theme:false,
            DEFAULT_COIN:"BTCUSDT",//当前交易对
            accountInfo:{//当前账户余额
                base_available:0,
                quote_available:0,
            },
            quote:"",//当前行情数据
            count:0,//下单数量
            rateNum:0,//预测收益
            available:0,//可用余额
            rebate:0,//返佣余额
            futureDmOrders:[],//委托数据
            activePage:1,//委托记录当前页
            activePageTotal:0,//委托记录总页数
            activePagesize:7,//委托记录每页显示数
            flowpages:1,//资金流水分页
            flowtotalPage:0,//资金流水总页数
            flowrecord:[],//资金流水数据
            symbols:[],
            assembles:[],
            deliverys:[],//交割记录
            isFirst:true,
            delPageNum:1,
            delTotalpage:0,//交割队列总页数
            timePeriod:1,//分析时间
            isDelivery:false,
            activeOnly:true,
            time:0,
            summary:"",
            interval:"",
            option :{

                series : [
                    {
                        name:'次',
                        type: 'pie',
                        radius : '50%',
                        center: ['30%', '40%'],
                        data: [
                            {
                                value:0,
                                name:this.$t("l.trade_78"),
                                itemStyle:{
                                    normal:{
                                        color:'rgb(79,93,118)',
                                        shadowBlur:'5',
                                        shadowColor:'rgba(0,0,0,0.3)',
                                        shadowOffsetY:'5'
                                    }
                                }
                            },
                            {
                                value:0,
                                name:this.$t("l.trade_79"),
                                itemStyle:{
                                    normal:{
                                        color:'rgb(80,227,194)',
                                        shadowBlur:'5',
                                        shadowColor:'rgba(0,0,0,0.3)',
                                        shadowOffsetY:'5'
                                    }
                                }
                            },
                            {
                                value:0,
                                name:this.$t("l.trade_80"),
                                itemStyle:{
                                    normal:{
                                        color:'rgb(245,166,35)',
                                        shadowBlur:'5',
                                        shadowColor:'rgba(0,0,0,0.3)',
                                        shadowOffsetY:'5'
                                    }
                                }
                            }
                        ],
                        label:{
                            normal:{
                                show:false,
                                position:'inside',
                                formatter:"{b} {c}{a}"
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    created(){
        this.baseinfo();
        // this.usertoken = this.$store.state.usertoken;
        // if(this.usertoken){
        //     this.checkLogin(this.usertoken,true,true,true,false);
        //     this.getdeliveryList();
        //     this.getflowRecord();
        //     this.getRecordSummary();
        // }
    },
    methods:{
        //基本信息
        async baseinfo(){
            let that = this;
            let res = await api.baseinfo()
            if(res.data.code==0){
                this.usertoken = this.$store.state.usertoken;
                if(this.usertoken){
                    this.checkLogin(this.usertoken,true,true,true,false);
                    this.getdeliveryList();
                    this.getflowRecord();
                    this.getRecordSummary();
                }
            }
        },
        getdelist(flag){
            let that = this;
            that.isDelivery = flag;
            that.delPageNum = 1;
            that.getdeliveryList();
        },
        getentrylist(flag){
            let that = this;
            that.activeOnly = flag;
            that.activePage = 1;
            that.futureOrderRequest();
        },
        settimePeriod(num){
            this.timePeriod = num;
            this.getRecordSummary();
        },
        deliveryListpre(){
            let that = this;
            that.delPageNum>1?that.delPageNum--:that.delPageNum
            that.getdeliveryList();
        },
        deliveryListnext(){
            let that = this;
            that.delPageNum++
            that.getdeliveryList();
        },
        futureorderPre(){
            let that = this;
            that.activePage--
            that.futureOrderRequest();
        },
        futureordernext(){
            let that = this;
            that.activePage++
            that.futureOrderRequest();
        },
        getflowpre(){
            let that = this;
            that.flowpages--
            that.getflowRecord();
        },
        getflownext(){
            let that = this;
            that.flowpages++
            that.getflowRecord();
        },
        //交割队列
        async getdeliveryList(){
            let that = this;
            let res = await api.deliveryList({
                token:that.usertoken,
                filled:that.isDelivery,
                pageNum:that.delPageNum,
                pageSize:8
            })
            if(res.data.code==0){
                that.delPageNum = res.data.data.currentPage;
                that.delTotalpage = res.data.data.totalPage;
                var status  = new Map();
                status.set("F", this.$t("l.trade_105"));
                status.set("P", this.$t("l.trade_106"));
                var data = res.data.data;
                var deliverys = data.list;
                deliverys.forEach(function(e){
                    //e.time=(new Date(e.createdDate)).Format("MM-dd HH:mm:ss");
                    e.time=moment(e.createdDate).format("YYYY-MM-DD HH:mm:ss")
                    e.orderAmount=Number(e.orderAmount).toFixed(2);
                    e.filledAmount=Number(e.filledAmount).toFixed(2);
                    e.orderStatus=e.orderStatus;
                    e.status_text=status.get(e.orderStatus);
                    e.css=e.orderStatus=='F'?'green':'';
                });
                that.deliverys = deliverys;
            }
        },
        //分析
        async getRecordSummary(){
            let that = this;
            let res = await api.recordSummary({
                token:that.usertoken,
                pairSymbol:that.DEFAULT_COIN,
                timePeriod:that.timePeriod
            })
            if(res.data.code==0){
                var jdata = res.data.data
                that.option.series[0].data[0].value = jdata.drawCount==null?0:jdata.drawCount;
                that.option.series[0].data[1].value = jdata.winCount==null?0:jdata.winCount;
                that.option.series[0].data[2].value = jdata.loseCount==null?0:jdata.loseCount;
			    that.summary = jdata;
            }else{
                that.hideMsgWin(res.data.msg , "" , 3000 ,6 );
            }
        },
        //资金流水
        async getflowRecord(){
            let that = this;
            let res = await api.flowRecord({
                token:that.usertoken,
                pageNum:that.flowpages,
                pageSize:8,
                fundFlowType:'F'
            })
            if(res.data.code==0){
                that.flowrecord = [];
                res.data.data.list.forEach((item,index)=>{
                    item.updatedDate = moment(item.updatedDate).format("MM-DD HH:mm:ss");
                    let amount = Number(item.amount).toFixed(3);
                    item.amount = amount.substring(0,amount.lastIndexOf('.')+3)
                    if(item.reasonCode=='FS'){
                        item.statusName = that.$t('l.add_108')
                    }else if(item.reasonCode=='FR'){
                        item.statusName = that.$t('l.add_109')
                    }else if(item.reasonCode=='FB'){
                        item.statusName = that.$t('l.add_112')
                    }else if(item.reasonCode=='FC'){
                        item.statusName = that.$t('l.add_110')
                    }else if(item.reasonCode=='FU'){
                        item.statusName = that.$t('l.add_111')
                    }
                    that.flowrecord.push(item);

                })
                that.flowtotalPage = res.data.data.totalPage
            }
        },
        //发送websocket请求
        initPageData(){
            let that = this;
            // 币种对期货行情
            that.win$.wsmsg.sendWsMsg({futureQuote : wsmsg.FutureQuoteRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                watch: true
            }))});
        },
        checkLogin(token,includeUser,includeAccount,reqAccountUpdate,hasFundOnly){
            let that = this;
            if(token != null && token != undefined && token != ''){
                that.win$.wsmsg.sendWsMsg({userLogin: wsmsg.UserLoginRequest.create(that.win$.wsmsg.addRequestId({
                            token : token,
                            includeUser : includeUser ,
                            includeAccount : includeAccount ,
                            reqAccountUpdate : reqAccountUpdate ,
                            hasFundOnly : hasFundOnly
                        }))});
            }
        },
        // websocket接送处理
        on_messages(msg){
            let that = this;
            if(msg.code >= 400 && msg.code <= 403 ){
                that.$layer.msg(msg.message, {
                    shadeClose : true,
                    shade: [0.8, '#000'],
                    anim : 6 ,
                    time :5000,
                    end : function (){
                        //$("#login_out_a_id").click() ;
                    }
                });
            }
            switch (msg.constructor.name) {
                case 'MasterDataResponse':
                    that.assembleSymbols(msg);
                    break ;
                case 'FutureBarResponse':
                    that.theme = true;
                    that.kLinebars = msg.bars.reverse();
                    event.$emit('onhistorycallback',that.kLinebars);
                    //console.log("++++++++++++++++++++++++我是历史数据");
                    break ;
                case 'FutureBarUpdateResponse':
                    that.newbar = msg.bar;
                    //console.log("++++++++++++++++++++++++我是新增数据");
                    break ;
                case 'UserLoginResponse':
                    that.assembleUserInfo(msg);
                    that.futureOrderRequest();
                    break ;
                case 'UserAccountUpdateResponse':
                    that.futureAssembleUserInfo(msg);
                    break ;
                case 'FutureDepthResponse':
                    console.log(msg);
                    break ;
                case 'NotificationResponse':
                    if(that.usertoken){
                        that.funNotification(msg);
                    }
                    break ;
                case 'FutureQuoteResponse':
                    that.refreshCurrentPair(msg);
                    break ;
                case 'FutureQuoteUpdateResponse':
                    that.refreshCurrentPair(msg);
                    break ;
                case 'FuturePlaceOrderResponse':
                    if(msg.code==0){
                        that.hideMsgWin(that.$t('l.add_114') , "" , 500 ,5 );
                    }else{
                        that.hideMsgWin(msg.message , "" , 500 ,5 );
                    }

                    //closeLoadWin(null);
                    break ;
                case 'FutureOrderResponse':
                    that.futureOrder(msg);
                    break ;
                case 'FutureOrderUpdateResponse':
                    that.refreshFutureOrder(msg);
                    break ;
            }
        },
        /**
         * 系统自动推送
         */
        funNotification(msg){
            let that = this;
            if(msg.code==351){//刷新websocket
                //资金流水请求
                //flowRequest($(".checkNext.flowRecord").attr('page')>1?$(".checkNext.flowRecord").attr('page')-1:1,10);
                that.getdeliveryList();
                //分析
               // $(".timeList").children()[0].click();
            }else if(msg.code==352){//刷新Rest
                //futureOrderRequest($(".checkNext.order").attr('page')>1?$(".checkNext.order").attr('page')-1:1,$(".checkNext.order").attr('is')=='true');
                that.futureOrderRequest();
                //$('.panelHead.entrust').children("span.title.active").click();//w委托刷新
            }
        },
        /**
         * 委托记录
         */
        futureOrder(msg){
            let that = this;
            this.futureDmOrders = [];
            var status  = new Map();
            status.set("S",that.$t("l.trade_98"));
            status.set("W",that.$t("l.trade_85"));
            status.set("P",that.$t("l.trade_106"));
            status.set("F",that.$t("l.trade_99"));
            status.set("E",that.$t("l.trade_52"));
            status.set("R",that.$t("l.trade_100"));
            msg.orders.forEach(function(e){
                var dmOrder = e;
                dmOrder.action_text = (e.action=='R')?that.$t("l.trade_71"):that.$t("l.trade_72");
                dmOrder.orderStatus_text = status.get(e.orderStatus);
                dmOrder.filledPrice=Number(e.filledPrice).toFixed(2);
                dmOrder.price=Number(e.price).toFixed(2);
                if(e.orderStatus=='R'){
                    dmOrder._css = 'red'
                }else{
                    dmOrder._css = 'green'
                }
                if(e.orderStatus=='S'){
                    dmOrder.result = "——";
                }else{
                    if(e.roundClose- e.roundPreClose==0)
                        dmOrder.result = that.$t("l.trade_78");
                    else if(!(e.roundClose- e.roundPreClose >0 ^ e.action=='R')){
                        dmOrder.resCss = "W";
                        dmOrder.result = that.$t("l.trade_101");
                    }else{
                        dmOrder.resCss = "L";
                        dmOrder.result = that.$t("l.trade_102");
                    }
                }
                if(e.roundClose<e.roundPreClose){
                    dmOrder.roundCss = "R";
                }else if(e.roundClose>e.roundPreClose){
                    dmOrder.roundCss = "G";
                }
                dmOrder.a_Time = moment(e.createdTime).format("MM-DD");
                dmOrder.b_Time = moment(e.createdTime).format("HH:mm:ss");
                dmOrder.roundClose  =(e.roundClose>0)?e.roundClose:"——";
                that.futureDmOrders.push(dmOrder);
            });
            that.activePageTotal = msg.activePageTotal
        },
        /**
         * 刷新委托记录
         */
        refreshFutureOrder(msg){
            let that = this;
            var status  = new Map();
            status.set("S",that.$t("l.trade_98"));
            status.set("W",that.$t("l.trade_85"));
            status.set("P",that.$t("l.trade_106"));
            status.set("F",that.$t("l.trade_99"));
            status.set("E",that.$t("l.trade_52"));
            status.set("R",that.$t("l.trade_100"));
            this.futureDmOrders.forEach(function(e,i) {
                if(msg.order.orderId==e.orderId){
                    var order = msg.order;
                    e.action_text = (order.action=='R')?that.$t("l.trade_71"):that.$t("l.trade_72");
                    e.price = order.price;
                    e.orderStatus_text = status.get(order.orderStatus);
                    if(order.orderStatus=='S'){
                        e.result = "——";
                    }
                    else{
                        if(order.roundClose-order.roundPreClose==0)
                            e.result = that.$t("l.trade_78");
                        else if(!(order.roundClose-order.roundPreClose >0 ^ order.action=='R')){
                            e.resCss = "W";
                            e.result = that.$t("l.trade_101");
                        }else{
                            e.resCss = "L";
                            e.result = that.$t("l.trade_102");
                        }
                    }
                    if(e.roundClose<e.roundPreClose){
                        e.roundCss = "R";
                    }else if(e.roundClose>e.roundPreClose){
                        e.roundCss = "G";
                    }
                    e.filledPrice = order.filledPrice;
                    moment(order.createdTime).format("HH:mm:ss")
                    e.a_Time = moment(order.createdTime).format("MM-dd");
                    e.b_Time = moment(order.createdTime).format("HH:mm:ss");
                    e.roundPreClose = order.roundPreClose;
                    that.futureDmOrders.splice(i, 1, e);
                }
            });
            that.futureOrderRequest();
            that.getflowRecord();
        },
        /**
         * 请求用户订单信息
         * @param page
         * @param activeOnly
         * @param reqTypeId
         * @returns
         */
        futureOrderRequest(){
            var obj = wsmsg.FutureOrderRequest.create(this.win$.wsmsg.addRequestId({
                                symbol : this.DEFAULT_COIN,
                                activeOnly: this.activeOnly ,
                                size : this.activePagesize,
                                page : this.activePage ,
                                watch :  true,
                            }))
            var reqId =  obj.requestId ;
            this.win$.wsmsg.sendWsMsg({futureOrder : obj});
        },
        /**
         * 刷新行情
         */
        refreshCurrentPair(msg){
            let that = this;
            var quote = msg.quote;
            if(quote.symbol==this.DEFAULT_COIN){
                if(msg.introUrl!=undefined&&msg.introUrl!=''&&msg.introUrl!=null){
                    // $(".tipBar").unbind();
                    // $(".tipBar").attr("href",msg.introUrl);
                }
                that.currentPair._css =quote.price - quote.popClose >0 ? 'up':'down';
                that.currentPair.price =quote.price;
                that.currentPair.prevClose =quote.prevClose;
                that.currentPair.popClose =quote.popClose;
                that.currentPair.time = new Date(quote.time).getSeconds();
            }
            that.quote = that.currentPair;
            if(that.isFirst){
                //that.interval = set
                that.countMed();
            }
        },
        //弹出
        hideMsgWin(msg , id , timeOut ,anim ){
            var index  = this.$layer.msg(msg, {
                            shadeClose : true,
                            id : id,
                            shade: [0.8, '#000'],
                            anim : anim ,
                            time :timeOut
                            } );
        },
        /**
         * 加载层
         * @param timeOut
         * @returns
         */
        loadWin(  timeOut   ){
            var index  = this.$layer.loading( 2, {    time: timeOut , shade: [0.8, '#000'] });
            return index ;
        },
        // 下单
        FuturePlaceOrderRequest(action){
            let that = this;
            if(!that.usertoken) {
                that.hideMsgWin(that.$t("l.home_20"), "", 1000, 6);
                return false ;
            }
            //that.loadWin(1000);
            if(!that.currentPair.futEnabled){
                that.hideMsgWin(that.$t("l.trade_103"), "", 1000, 6);
                return  false;
            }
            var price =  that.count ;
            var max= that.currentPair.futMax;
            var min= that.currentPair.futMin;
            var acount = that.available;
            if(price==''){
                that.hideMsgWin(that.$t("l.form_validate7"), "", 1000, 6);
                return  false;
            }
            if(min > Number(price) ){
                that.hideMsgWin(that.$t("l.trade_61")+min, "", 1000, 6);
                return  false;
            }

            if(max < Number(price)&& max > 0  ){
                that.hideMsgWin(that.$t("l.trade_60")+max, "", 1000, 6);
                return  false;
            }
            that.win$.wsmsg.sendWsMsg({futurePlaceOrder: wsmsg.FuturePlaceOrderRequest.create(that.win$.wsmsg.addRequestId({
                symbol : that.DEFAULT_COIN,
                action: action ,
                price : price ,
            }))});
        },
        /**
         * 组装交易对信息
         * @returns
         */
        assembleSymbols(msg) {
            let that = this;
            var pairs =  msg.pairs ; // 支持的交易对
            var currencies  = msg.currencies ; // 所有币种信息
            let symbols = [] ;
            for (var i = 0; i < pairs.length; i++) {
                var symbol  = {}  ;
                var pair = pairs[i] ;
                var baseCurrencyId = pair.baseCurrencyId ;
                var quoteCurrencyId = pair.quoteCurrencyId ;
                for(var j = 0; j < currencies.length; j++){
                    if(baseCurrencyId === currencies[j].currencyId || quoteCurrencyId === currencies[j].currencyId ){
                        if(baseCurrencyId === currencies[j].currencyId){
                            symbol.baseCurrencyName = currencies[j].code  ; //基础币种名称
                            symbol.baseCurrencyPrecision = currencies[j].precision ; // 基础币种小数位数
                            symbol.region = currencies[j].region ;  //  P - 主流区; I - 创新区
                        }else{
                            symbol.quoteCurrencyName = currencies[j].code  ; // 计价币种名称
                            symbol.quoteCurrencyPrecision = currencies[j].precision ; // 计价币种小数位数
                        }
                    }
                }
                symbol.closeBtc = 0 ; // 1个base currency对BTC的最新价格?
                symbol.closeCny = 0 ; // 此处获取的应该是最新价折合成CNY的价格，而不是单个折合成CNY的价格
                symbol.closeUsd = 0 ;
                symbol.baseCurrencyId  = baseCurrencyId ; // 基础币种ID
                symbol.quoteCurrencyId  = quoteCurrencyId ;  // 计价币种ID
                symbol.minNotional = pair.minNotional ; //最小订单价值，量*价格
                symbol.maxSize = pair.maxSize ; // 最大下单量
                symbol.minSize = pair.minSize ; // 最小下单量
                symbol.maxPrice = pair.maxPrice ; // 最大下单价格
                symbol.minPrice = pair.minPrice ; // 最小下单价格
                symbol.tradable = pair.tradable ; // 当前是否可交易
                symbol.priceDisplayDp = pair.priceDisplayDp ; //价格显示小数位数
                symbol.sizeDisplayDp = pair.sizeDisplayDp ; //量显示小数位数
                symbol.symbol = pair.symbol ; //交易对名称 ETHUSDT
                symbol.pairId = pair.pairId ; // 交易对ID
                symbol.futEnabled = pair.futEnabled ;
                symbol.high = 0 ;
                symbol.open = 0 ;
                symbol.low = 0	 ;
                symbol.close = 0 ;
                symbol.price = 0 ;
                symbol.volume = 0 ;
                symbol.changeFor24H = 0 ; // 24小时涨跌幅
                symbol.isWatch = false ;
                symbol.takerCommission = 0 ; // 限价交易手续费比例
                symbol.makerCommission = 0 ;  // 市价交易手续
                if(pair.futRate==null||pair.futRate==undefined||pair.futRate=='')
                    symbol.futRate=1;
                else
                    symbol.futRate = pair.futRate ; //分时期货收益返回比率
                if(pair.futMin==null||pair.futMin==undefined||pair.futMin=='')
                    symbol.futMin=0;
                else
                    symbol.futMin = pair.futMin ; //
                if(pair.futMax==null||pair.futMax==undefined||pair.futMax=='')
                    symbol.futMax=0;
                else
                    symbol.futMax = pair.futMax ; //


                if(symbol.symbol == that.DEFAULT_COIN){
                    that.currentPair = symbol  ;
                }
                symbols.push(symbol);
            }
           that.symbols = symbols;
           that.initPageData();
        },
        futureAssembleUserInfo(msg){
            let that = this;
            if(that.assembles.dmUserAccount.currencyId==msg.account.currencyId){
                that.assembles.dmUserAccount = msg.account;
                let available = Number(msg.account.available).toFixed(3);
                that.assembles.available = available.substring(0,available.lastIndexOf('.')+3)
                if(msg.account.rebate){
                    that.assembles.rebate = Number(msg.account.rebate)
                }else{
                    that.assembles.rebate = 0
                }
            }
        },
        assembleUserInfo(msg){
            let that = this;
            that.symbols.forEach(function(obj) {
                if(obj.symbol==that.DEFAULT_COIN)
                    msg.accounts.forEach(function(e) {
                        if(e.currencyId==obj.quoteCurrencyId){
                            that.assembles.dmUserAccount=e;
                            that.assembles.quoteCurrencyName = obj.quoteCurrencyName;
                            that.assembles.rebate = Number(e.rebate)
                            let available = Number(e.available).toFixed(3);
                            that.assembles.available = available.substring(0,available.lastIndexOf('.')+3)
                        }
                    })
            })
        },
        countMed(){
            let that = this;
            if(that.isFirst){
                num = 59 - Number(that.currentPair.time);
                that.isFirst=false;
            }
            if(num%10==5){
                num = 59 - Number(that.currentPair.time);
            }
            that.time = num+"s";
            $(".klinetime span").css("background","#647798");
            if(num<30)
            $(".klinetime span").css("background","#5aabfa")
            if(num<10)
            $(".klinetime span").css("background","#ee7a98")
            if(num<3)
            $(".klinetime span").css("background","#f84360")
            num -= 1;
            if(num<0)
                num=59;
            if(!that.interval){
                that.interval = setInterval(()=>{
                    that.countMed()
                },1000)
            }

        },
        changecount(){
            let that = this;
            that.count = that.count.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
            let rateNum = Number(that.count*that.currentPair.futRate).toFixed(3);
            that.rateNum = rateNum.substring(0,rateNum.lastIndexOf('.')+3)
        },
        changepercentage(){
            let that = this;
            that.count = that.assembles.available*that.percentage/100;
            let rateNum = Number(that.assembles.available*that.percentage*that.currentPair.futRate/100).toFixed(3);
            that.rateNum = rateNum.substring(0,rateNum.lastIndexOf('.')+3)
        },
    },
    mounted(){
        let that = this;
        //that.theme = true;
        this.win$.wsmsg.sendWsMsg({masterData : wsmsg.MasterDataRequest.create(this.win$.wsmsg.addRequestId({
        }))});

        // websocket接收
        this.win$.wsmsg.setOnWsMsg(function(msg) {
            that.on_messages(msg);
        })
    },
    destroyed() {
        //this.win$.wsmsg.close();
        clearInterval(this.interval);
    }
}
</script>
